Product Detail

Product detail page is the page where user can see the details of a product.

Product Detail Page Blocks

Block Name	Description	Image
appmaker/shopify-variation-listner	This block is used to listen to the product variation changes. This is very important. This block should be added to the page.
appmaker/shopify-product-image	This block is used to display the product image.
appmaker/shopify-product-data	This block is used to display the product data like title, price, sale price, offer, etc.
appmaker/product-counter	This block is used to display or update the quantity of a product.
appmaker/shopify-product-variation	This block is used to display the product variations.
appmaker/shopify-product-description	This block is used to display the product description.
appmaker/shopify-related-product-scroller	This block is used to display the related products.
appmaker/shopify-product-pbp-buttons	This block is used to display the product buttons like add to cart, buy now, etc.

example page:

Block customization example:

1. Create a new component.

Product Data component (Sample code)

import React from "react";
import { StyleSheet } from "react-native";
import { useProductDetail } from "@appmaker-xyz/shopify";
import { ThemeText, Layout } from "@appmaker-xyz/ui";

const ProductData = ({ attributes }) => {
  const { title, regularPrice, salePercentage, salePrice, productVariant } =
    useProductDetail({ attributes });

  return (
    <Layout>
      <Layout style={styles.mainContainer}>
        <ThemeText size="lg">{title}</ThemeText>
        {salePrice ? (
          <Layout style={styles.priceContainer}>
            <ThemeText
              size="md"
              fontFamily="medium"
              color={regularPrice ? "#fa4545" : "#000"}
            >
              {salePrice}
            </ThemeText>
            <ThemeText fontFamily="medium" style={styles.priceWithOffer}>
              {regularPrice}
            </ThemeText>
            {salePercentage ? (
              <ThemeText
                color="#FFFFFF"
                size="sm"
                style={styles.salePercentage}
              >
                {salePercentage}
              </ThemeText>
            ) : null}
          </Layout>
        ) : (
          <ThemeText fontFamily="medium" style={styles.price}>
            {regularPrice}
          </ThemeText>
        )}
        <ThemeText style={styles.taxIncluded} size="sm">
          Tax included
        </ThemeText>
        <ThemeText
          size="sm"
          style={styles.skuText}
        >{`SKU: ${productVariant?.sku}`}</ThemeText>
      </Layout>
    </Layout>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    width: "100%",
    backgroundColor: "#ffffff",
    padding: 12,
  },
  priceWithOffer: {
    marginStart: 10,
    textDecorationLine: "line-through",
    textDecorationStyle: "solid",
  },
  salePercentage: {
    marginStart: 10,
    backgroundColor: "#FF0000",
    padding: 4,
  },
  price: {
    marginTop: 10,
  },
  priceContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginTop: 10,
  },
  taxIncluded: {
    marginTop: 10,
  },
  skuText: {
    color: "#888888",
    marginTop: 10,
  },
  sizeGuideIconContainer: {
    marginTop: 10,
    flexDirection: "row",
  },
  sizeGuideIcon: {
    width: 25,
    height: 25,
  },
});

export default ProductData;

Note: You can use the useProductDetail hook to get the product data. The hook is available in the @appmaker-xyz/shopify package. Refer to the useProductListItem documentation for more details.

2. Register the newly created block

Register Block (Sample Code)

Register this block to appmaker blocks registry in blocks/index.js file.

import ProductData from "../components/ProductData";

const blocks = {
  {
    name: 'appmaker/shopify-product-data',
    View: ProductData,
  },
};

export { blocks };

3. Add / Override the block to a page

Add to page (Sample Code)

Add the block to a page by adding the block name to the page's blocks array.

const page = {
  name: "Product Detail",
  blocks: [
    {
      name: "appmaker/shopify-product-data",
      attributes: {},
    },
  ],
};